<template>
  <div>
    <mt-header fixed title="购物车">
      <router-link to="/" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
      <mt-button slot="right">
        <router-link to="/search">搜索</router-link>
      </mt-button>
    </mt-header>
    <ul class="cart">
      <li v-for="item in cartList" :key="item.id">
        <div class="cart-left">
          <img :src="item.picSrc" alt="">
          <input type="checkbox" :value="item" v-model="checkedId">
        </div>
        <div class="cart-right">
          <p class="title">{{item.proName}}</p>
          <p>
            <span>￥{{item.price}}</span>
            <span>x{{item.buynum}}双</span>
            <del>￥{{item.oldPrice}}</del>
          </p>
          <p style="margin-top:15px">鞋码：{{item.size}}</p>
        </div>
        <div class="cart-del" @click="del(item.id-1)">x</div>
      </li>
    </ul>
    <div class="bottom">
      <div class="price-left">
        订单总额 ： ￥{{allprice}}
      </div>
      <div class="price-right">
        <h4 style="color:white;margin:0;padding:0;">生成订单</h4>
      </div>
    </div>
    <mt-tabbar class="footer" fixed>
      <mt-tab-item id="index">
        <img src="../assets/icon.png" slot="icon">
        <router-link to="/">首页</router-link>
      </mt-tab-item>
      <mt-tab-item id="sort">
        <img src="../assets/icon.png" slot="icon">
        <router-link to="/sort">分类</router-link>
      </mt-tab-item>
      <mt-tab-item id="shoppingCar" class="active">
        <img src="../assets/icon2.png" slot="icon">
        <router-link to="/shoppingCar">购物车</router-link>
      </mt-tab-item>
      <mt-tab-item id="member">
        <img src="../assets/icon.png" slot="icon">
        <router-link to="/member">会员中心</router-link>
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {

  data () {
    return {
      options: [],
      cartList: [],
      src: '',
      id: '',
      name: '',
      allprice: 0,
      checkedId: []
    }
  },

  methods: {
    del (i) {
      var cartData = JSON.parse(localStorage.getItem('cartData'))
      cartData.splice(i, 1)
      localStorage.setItem('cartData', JSON.stringify(cartData))
      this.address = JSON.parse(localStorage.getItem('cartData'))
      this.cartList = JSON.parse(localStorage.getItem('cartData')) || []
    }
  },

  created () {
    this.cartList = []
    this.cartList = JSON.parse(localStorage.getItem('cartData')) || []
    this.checkedId = JSON.parse(localStorage.getItem('cartSteledData')) || []
    if (this.checkedId.length > 0) {
      let newGoodsList = this.checkedId
      this.allprice = 0
      for (let i = 0; i < newGoodsList.length; i++) {
        this.allprice += newGoodsList[i].num * newGoodsList[i].price
      }
    }
  },
  watch: {
    checkedId (data) {
      localStorage.setItem('cartSteledData', JSON.stringify(data))
      let newGoodsList = this.checkedId
      this.allprice = 0
      for (let i = 0; i < newGoodsList.length; i++) {
        this.allprice += newGoodsList[i].buynum * newGoodsList[i].price
      }
    }
  }
}
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
}
.footer a,
.mint-header a {
  color: white;
  text-decoration: none;
}
.mint-tabbar {
  background-color: #0094ff;
}
.bottom {
  position: fixed;
  left: 0;
  bottom: 55px;
  display: flex;
  width: 100%;
  height: 40 / 16rem;
  border-top: 1 / 16rem solid #ccc;
  align-items: center;
  justify-content: space-between;
  .price-left {
    color: red;
    padding-left: 10px;
    width: 70%;
  }
  .price-right {
    background-color:red;
    width: 30%;
    text-align:center;
  }
}
.price-right {
  font-weight: 400;
  height: 40 / 16rem;
  line-height: 40 / 16rem;
}
.price-left h4 {
  padding: 0;
  width: 200 / 16rem;
  font-weight: 400;
  height: 40 / 16rem;
  line-height: 40 / 16rem;
}
.price-right h4 {
  height: 40 / 16rem;
  line-height: 40 / 16rem;
}
.active a {
  color: orange;
}
.cart {
  margin-top: 40px;
  z-index: 999;
  li {
    display: flex;
    margin: 10px;
    border: 1px solid #ddd;
    position: relative;
    .cart-left {
      width: 100px;
      padding: 5px;
      img {
        width: 100%;
        margin-top: 20px;
      }
    }
    .cart-right {
      flex: 1;
      padding: 5px;
      p {
        font-size: 14px;
        line-height: 18px;
        span {
          font-size: 20px;
          color: red;
          line-height: 40px;
        }
        span:nth-child(2) {
          font-size: 15px;
          color: #ccc;
          float: right;
          margin-right: 30px;
        }
        del {
          color: #ddd;
          margin-left: 5px;
        }
      }
      .title{
        display: -webkit-box;
        overflow: hidden;
        white-space: normal !important;
        text-overflow: ellipsis;
        word-wrap: break-word;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
    .cart-del {
      position: absolute;
      bottom: 5%;
      right: 5%;
      color: #999;
      font-size: 20px;
    }
  }
}
</style>
